<template>
  <div>
    <div class="box">
      <Top>我的喜欢</Top>
      <Button :data="lickList" @delLickData="delLickData" @getDetailed="getDetailed"></Button>
    </div>
  </div>
</template>

<style scoped>
.box {
  background: #f5f5f5;
}
</style>

<script>
import Top from '../components/favoriteBox/favoriteTop.vue'
import Button from '../components/favoriteBox/favoritebutton.vue'
export default {
  components: {
    Top,
    Button
  },
  created() {
    this.getLickList();
  },
  data() {
    return {
      tabPosition: "left",
      lickList: []
    };
  },
  methods: {
    //获取本地存储的数据
    getLickList() {
      // 从本地存储中获取数据
      const storedLickList = JSON.parse(localStorage.getItem('lickData')) || [];
      // 将数据存入 lickList 中
      this.lickList = storedLickList;
      console.log(this.lickList)
    },
    delLickData(id) {
      //获取到下标进行删除
      const index = this.lickList.findIndex(item => item.id === id);
      // console.log(index);
      //判断不等于-1
      if (index !== -1) {
        //删除对应的下表
        this.lickList.splice(index, 1);
        //更新本地存储中的数据
        localStorage.setItem('lickData', JSON.stringify(this.lickList));
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
      }
    },
    getDetailed(id) {
      this.$router.push({
        name: 'detailed', // 使用路由名称
        params: {
          id: id, // 使用路由参数
        }
      })
    }

  }

};
</script>